<template>
  <div class="layout">
    <van-nav-bar title="发布商机" left-arrow> </van-nav-bar>
    <div class="layout-step">
      <van-steps :active="stepActive">
        <van-step>选择类型</van-step>
        <van-step>填写商机信息</van-step>
        <van-step>确认商机信息</van-step>
        <van-step>提交审核</van-step>
      </van-steps>
    </div>
    <div class="layout-content">
      <component :is="componentsMap[stepActive]" ref="formRef"></component>
    </div>
    <div class="layout-footer">
      <van-button
        v-if="stepActive < 3"
        type="default"
        block
        round
        @click="prevStep"
        >上一步</van-button
      >
      <van-button
        v-if="stepActive < 3"
        type="primary"
        block
        round
        @click="nextStep"
        >下一步</van-button
      >
      <van-button v-else type="primary" block round @click="submitBusiness"
        >点击确认提交</van-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
const stepActive = ref<number>(0);
const componentsMap = shallowRef<{ [key: string]: any }>({
  0: defineAsyncComponent(() => import("./components/FirstStep.vue")),
  1: defineAsyncComponent(() => import("./components/SecondStep.vue")),
  2: defineAsyncComponent(() => import("./components/ThirdStep.vue")),
  3: defineAsyncComponent(() => import("./components/LastStep.vue")),
});
const formRef = ref<any>();

const nextStep = () => {
  if (stepActive.value >= 3) {
    // 最后一步
    return;
  }
  stepActive.value++;
};

const prevStep = () => {
  if (stepActive.value <= 0) {
    // 第一步
    return;
  }
  stepActive.value--;
};

const submitBusiness = () => {};
</script>

<style lang="scss" scoped>
.layout {
  height: 100vh;

  &-content {
    height: calc(100% - 158px);
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;
    background-color: var(--bob-background-color);
  }

  &-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(100% - 30px);
    height: 59px;
    padding: 0 15px;
    border-top: 1px solid #f2f3f5;
  }
}
.layout-step {
  height: 52px;
  padding: 0 15px;

  .van-steps--horizontal {
    height: 100%;
    padding-top: 0;
  }
  :deep(.van-steps__items) {
    height: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}
:deep(.van-hairline--bottom:after) {
  border-bottom-width: 0;
}
</style>

